<!-- 达标率分析 -->
<template>
  <div class="ctn-box ctn-center-box">
    <div class="ctn-box-title">
      <span>达标率分析</span>
    </div>
    <div class="ctn-box-base-box right-echarts-box">
      <div class="tags">
        <swiper
            :modules="modules"
            :slides-per-view="8"
            space-between="5"
            effect="fade"
            navigation
        >
          <swiper-slide
              v-for="(name,key) in kpiNamesList">
            <div class="tag-item" @click="drawEcharts1(key)">
              <span>{{name}}</span>
              <img :src="getImageUrl(key)"/>
            </div>
          </swiper-slide>
        </swiper>
      </div>
      <div class="echarts-box">
        <basic-echarts-bar
            :chartData="chartDataBox"
            @click="handlePage"
        ></basic-echarts-bar>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {IBase} from "@/api/interface/base";
import BasicEchartsBar from "@/components/basicEchartsBar.vue";
import {ICONS, ICONSSELECT} from "@/config";
import { Navigation } from 'swiper/modules';
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import 'swiper/css/navigation';
import {useBaseStore} from "@/store";
import {getKpiReportRateApi} from "@/api/modules/base";
import {nextTick, watch} from "vue";

defineOptions({
  name: 'passRateView'
})
// 入参
const props = defineProps({
  params: {
    type: Object,
    default: () => {
      return {
        brand: null,
        create_date: null
      }
    }
  }
})

watch(
    () => props.params,
    async () => {
      await nextTick()
      await getData()
    },
    {
      deep: true
    }
)

// 轮播配置
const modules = [Navigation]
// 达标率
const chartDataBox: IBase.bigScreenEcharts = reactive({
  name:['达标率'],
  yAxisNameFlag:false,
  yName:['单位:%'],
  yAxisMinData:0,
  yAxisMaxData:100
});
// kpi names
let kpiNamesList = ref<String[]>([])
// kpi 达标所有数据
let dataPassRateList = reactive([])
// 当前激活的kpi
let activeTag = ref<Number>(0)

// 显示达标率报表
const drawEcharts1 = (index: number = 0) =>{
  activeTag.value = index
  let labels = []
  let params = []
  if(dataPassRateList && dataPassRateList.length>0){
    const arr = dataPassRateList[index];
    let {kpi,kpi_name,...params1} = arr
    labels = Object.keys(params1)
    params = Object.values(params1).map(p=>p.pass_rate.split('%')[0])
    chartDataBox.yAxisNameFlag = true
  }else{
    chartDataBox.yAxisNameFlag = false
  }

  chartDataBox.data = {
    // 可自定义key
    0: {
      data: params,
      type: 'bar',
      lineColor: 'rgba(0, 255, 255, 1)', // 折现颜色
      colors: ['rgba(194, 251, 255, 1)','rgba(0, 215, 228, 1)']
    },
  }
  chartDataBox.label = labels
}
// 页面跳转
const handlePage = () => {
  window.location.href = 'http://zst.zlocr.com:81/dashboard/complianceRate/index'
}

// 获取图片路径
const getImageUrl = (key: number) =>{
  if(key === activeTag.value){
    return new URL(`../../../assets/icons/tag/tag-s-${key+1}.png`, import.meta.url).href;
  }else {
    return new URL(`../../../assets/icons/tag/tag-${key+1}.png`, import.meta.url).href;
  }
}
// 获取达标率接口
const getData = async () => {
  // kpi达标率
  const {data} = await getKpiReportRateApi({create_date: props.params?.create_date})
  dataPassRateList = data
  kpiNamesList.value = dataPassRateList.map(i=>i.kpi_name)
  // 默认加载第一个kpi的报表
  drawEcharts1()
}
onMounted(() => {
  getData()
})
</script>

<style lang="scss" scoped>

</style>
